<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视界智检 - 智能视觉缺陷检测系统</title>

    <!-- 第三方库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">

    <!-- 模块化CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/layout.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/header.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/control-panel.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/statistics.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/config.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/statistics-modal.css') }}">

    <style>
        /* 导航按钮样式 */
        .nav-buttons {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        .nav-btn {
            background: #2c3e50;
            color: white;
            border: 2px solid #34495e;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 15px;
            font-weight: 600;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .nav-btn:hover {
            background: #34495e;
            border-color: #4a6741;
            transform: translateY(-1px);
        }

        .nav-btn.active {
            background: #27ae60;
            border-color: #2ecc71;
            color: white;
        }

        .nav-btn.active:hover {
            background: #229954;
            border-color: #27ae60;
        }

        .nav-btn i {
            font-size: 18px;
        }

        /* 调整头部布局 - 增加高度 */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 30px;
            min-height: 80px;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 30px;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <div class="logo">
            <i class="fas fa-eye"></i>
            <h1>视界智检系统</h1>
        </div>

        <div class="header-right">
            <!-- 导航按钮 -->
            <div class="nav-buttons">
                <a href="/" class="nav-btn active" id="homeBtn">
                    <i class="fas fa-home"></i>
                    主页
                </a>
                <a href="/stats" class="nav-btn" id="statisticsBtn">
                    <i class="fas fa-chart-line"></i>
                    数据统计
                </a>
            </div>

            <div class="system-status">
                <div class="status-indicator status-stopped" id="systemStatus">
                    <div class="status-dot"></div>
                    <span>系统停止</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 主容器 -->
    <div class="main-container">
        <!-- 左侧面板 -->
        <div class="left-panel">
            <!-- 控制面板 -->
            <div class="card control-panel">
                <div class="section-title">
                    <i class="fas fa-cogs"></i>
                    系统控制
                </div>
                <div class="control-buttons">
                    <button class="btn btn-start" id="startBtn">
                        <i class="fas fa-play"></i>
                        启动系统
                    </button>
                    <button class="btn btn-stop" id="stopBtn" disabled>
                        <i class="fas fa-stop"></i>
                        停止系统
                    </button>
                </div>
            </div>

            <!-- 摄像头画面 -->
            <div class="card camera-section">
                <div class="section-title">
                    <i class="fas fa-video"></i>
                    实时监控
                </div>
                <div class="camera-container">
                    <!-- 用于展示服务器推送的视频流 -->
                    <img src="/api/video_feed" alt="Video Stream" style="width: 640px; height: 480px;">

                    <!-- 检测结果覆盖层 TODO: 可能需要修改逻辑 -->
                    <div class="detection-overlay" id="detectionOverlay">
                        <div class="detection-info">
                            <div><strong>检测结果:</strong> <span id="detectionStatus">正常</span></div>
                            <div><strong>置信度:</strong> <span id="detectionConfidence">95%</span></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <!-- 右侧面板 -->
        <div class="right-panel">
            <!-- 统计面板 -->
            <div class="card statistics-panel">
                <div class="section-title">
                    <i class="fas fa-chart-bar"></i>
                    实时统计
                </div>
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-number" id="totalProcessed">0</div>
                        <div class="stat-label">总检测数</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number" id="passRate">0%</div>
                        <div class="stat-label">合格率</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number" id="totalNormal">0</div>
                        <div class="stat-label">合格品</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-number" id="totalDefective">0</div>
                        <div class="stat-label">缺陷品</div>
                    </div>
                </div>
                <div class="chart-container">
                    <canvas id="defectChart"></canvas>
                </div>
                <button onclick="openModal()" class="btn btn-statistics">
                    <i class="fas fa-chart-pie"></i> 查看统计分析
                </button>
            </div>

            <!-- 日志面板 -->
            <div class="card logs-panel">
                <div class="section-title">
                    <i class="fas fa-list-alt"></i>
                    运行日志
                </div>
                <div class="logs-container" id="logsContainer">
                    <div class="log-entry log-info">
                        [2025-06-04 13:49:52] INFO | 系统初始化完成
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 配置面板 -->
    <div class="card config-panel">
        <div class="section-title">
            <i class="fas fa-sliders-h"></i>
            系统配置
        </div>
        <div class="config-grid">
            <div class="config-section">
                <h3>功能开关</h3>
                <div class="config-item">
                    <span>自动分拣</span>
                    <div class="toggle-switch active" data-config="sorting_enabled"></div>
                </div>
                <div class="config-item">
                    <span>语音控制</span>
                    <div class="toggle-switch active" data-config="voice_control_enabled"></div>
                </div>
            </div>
            <div class="config-section">
                <h3>缺陷类型检测</h3>
                <div class="config-item">
                    <span>开裂检测</span>
                    <div class="toggle-switch active" data-config="defect_types.crazing.enabled"></div>
                </div>
                <div class="config-item">
                    <span> 夹杂物检测</span>
                    <div class="toggle-switch active" data-config="defect_types.inclusion.enabled"></div>
                </div>
                <div class="config-item">
                    <span>斑点检测</span>
                    <div class="toggle-switch active" data-config="defect_types.patches.enabled"></div>
                </div>
                <div class="config-item">
                    <span>凹坑检测</span>
                    <div class="toggle-switch active" data-config="defect_types.pitted_surface.enabled"></div>
                </div>
                <div class="config-item">
                    <span>卷入检测</span>
                    <div class="toggle-switch active" data-config="defect_types.rolled-in_scale.enabled"></div>
                </div>
                <div class="config-item">
                    <span>划痕检测</span>
                    <div class="toggle-switch active" data-config="defect_types.scratches.enabled"></div>
                </div>
            </div>
        </div>
    </div>


    {% include 'statistics-modal.html' %}


    <!-- 模块化JavaScript -->
    <script src="{{ url_for('static', filename='js/system-manager.js') }}"></script>
    <script src="{{ url_for('static', filename='js/detection-manager.js') }}"></script>
    <script src="{{ url_for('static', filename='js/statistics-manager.js') }}"></script>
    <script src="{{ url_for('static', filename='js/log-manager.js') }}"></script>
    <script src="{{ url_for('static', filename='js/voice-manager.js') }}"></script>
    <script src="{{ url_for('static', filename='js/socket-manager.js') }}"></script>
    <script src="{{ url_for('static', filename='js/config-manager.js') }}"></script>
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
    <script src="{{ url_for('static', filename='js/statistics-modal.js') }}"></script>

    <script>
        // 导航按钮活跃状态管理
        document.addEventListener('DOMContentLoaded', function () {
            const currentPath = window.location.pathname;
            const navButtons = document.querySelectorAll('.nav-btn');

            navButtons.forEach(btn => {
                btn.classList.remove('active');
                if ((currentPath === '/' || currentPath === '/index.html') && btn.id === 'homeBtn') {
                    btn.classList.add('active');
                } else if (currentPath === '/statistics' && btn.id === 'statisticsBtn') {
                    btn.classList.add('active');
                }
            });
        });
    </script>
    <script>
        const SOCKET_IO_URL = 'http://172.16.250.167:5000';
        const socket = io(SOCKET_IO_URL, { transports: ['websocket', 'polling'] });

        socket.on('connect', () => console.log('✅ 已连接到 Socket.IO'));
        socket.on('connect_error', (err) => console.error('❌ 连接 Socket.IO 失败:', err));

        socket.on('system_control', (msg) => {
            console.log('Received system_control:', msg);
            if (msg.action === 'start') {
                // document.getElementById('startBtn').click();
                window.systemManager.updateSystemStatus(true);
                window.logManager?.addLogEntry('info', '语音触发：系统启动');
            }     
            else if (msg.action === 'stop'){
                // document.getElementById('stopBtn').click();
                window.systemManager.updateSystemStatus(false);
                window.logManager?.addLogEntry('info', '语音触发：系统停止');
                window.detectionManager?.hideDetectionOverlay();
            }
            else if (msg.action === 'nav_stats') {
                document.getElementById('statisticsBtn')?.click();
                window.logManager?.addLogEntry('info', '语音导航：跳转到统计页');
            }
        });
    </script>
</body>

</html>